<template>
	<u-popup :show="show" mode="center" width="600rpx" round="20rpx">
		<view class="d-mode d-p-l-50 d-p-r-50">
			<view class="d-text-center d-font-32 d-p-t-80 d-p-b-80">{{ content }}</view>
			<view class="d-flex">
				<view class="d-flex-1 d-m-r-30">
					<u-button
						type="primary"
						shape="circle"
						:custom-style="{
							height: '80rpx',
							background: '#DCDCDC',
							fontSize: '30rpx',
							borderColor: '#DCDCDC'
						}"
						@click="cancel"
					>
						放弃支付
					</u-button>
				</view>
				<view class="d-flex-1">
					<u-button
						type="primary"
						shape="circle"
						:custom-style="{
							height: '80rpx',
							background: '#59A0FF',
							fontSize: '30rpx',
							borderColor: '#59A0FF'
						}"
						@click="confirm"
					>
						继续支付
					</u-button>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	name: 'd-mode',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		content: {
			type: String,
			default: ''
		}
	},
	methods: {
		cancel() {
			this.$emit('cancel');
		},
		confirm() {
			this.$emit('confirm');
		}
	}
};
</script>

<style lang="scss" scoped>
.d-mode {
	width: 600rpx;
	height: 330rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-sizing: border-box;
}
</style>
